<template>
  <div class="side-bar" element-loading-background="rgba(0, 0, 0, 0)">
<!--    <div class="oms-log padding-logo">-->
<!--      <span>报文模拟器</span>-->
<!--    </div>-->
<!--    <el-tabs v-model="searchForm.tabLabel" type="border-card">-->
<!--      <el-tab-pane label="环境" name="01">-->
<!--        <env-tree :data="searchForm"></env-tree>-->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="请求" name="02">-->
<!--        <req-tree :data="searchForm"></req-tree>-->
<!--      </el-tab-pane>-->
<!--    </el-tabs>-->
    <req-tree :data="searchForm"></req-tree>
  </div>
</template>

<script>
  import SidebarItem from './SidebarItem';

  export default {
    components: {
      SidebarItem
    },
    data() {
      return {
        searchForm: {
          env: '',
          req: '',
          tabLabel: '01'
        },
      };
    },
    methods: {}
  };
</script>

<style lang="scss">

  .el-tabs__item {
    width: 190px;
    text-align: center;
  }

  .side-bar {
    width: 400px;
    float: left;
    height: 100%;
    overflow-y: auto;


    .oms-log {
      font-size: 24px;
      text-align: center;
      line-height: 100px;
      color: #fff;
      border-bottom: 1px solid #415369;
      background: #11243f;

      &.padding-logo {
        padding: 0;

        > div {

          > span {
            font-size: 32px;
            color: #418BEB;
            font-weight: 600;
            font-family: Arial, Helvetica, sans-serif;
            vertical-align: middle;
          }
        }
      }

      &.padding-logo-small {
        padding: 0 10px;
      }

    }

    .searchMenu {
      padding-left: 43px;
      font-size: 14px;
      line-height: normal;

      &.search:hover {
        background-color: transparent;
      }

      &:hover {
        background-color: #f6f6f6;
      }

      .feat-flex {
        line-height: 60px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px;
      }
    }
  }
</style>
